<template>
  <div class="Echarts">

    <div style="display: flex;flex-direction: row;margin-top: 50px">
      <div id="main" style="width: 700px;height: 400px;"></div>
      <div id="pie1" style="width: 700px;height: 400px"></div>
    </div>

    <div style="height: 0px"></div>
    <div style="display: flex;flex-direction: row;margin-top: 0px">
      <div id="pie2" style="width: 1200px;height: 700px;margin-top: 100px"></div>
      <div id="bar" style="width: 900px;height: 600px;margin-top: 100px"></div>
    </div>

  </div>
</template>

<script>
  import request from '@/utils/request'
  import effect from '../views/Effect'
  import "../assets/index.css";
  export default {
    name: 'BigData',
    components:{effect},
    methods: {
      myEcharts() {
        var myChart = this.$echarts.init(document.getElementById('main'))

        var myChart2 = this.$echarts.init(document.getElementById('bar'))
        var myChart3 = this.$echarts.init(document.getElementById('pie1'))
        var myChart4 = this.$echarts.init(document.getElementById('pie2'))
        //配置图表
        var option = {
          grid: {          //显示数据的图表位于当前canvas的坐标轴
            x: 50,
            y: 55,
            x2: 50,
            y2: 60,
            borderWidth: 1
          },
          title: {
            left: 'left',
            textStyle: {
              color: 'green',
              fontStyle: 'normal',
              fontWeight: 'bold'
            },
            text: '每日用户注册'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          tooltip: {},
          legend: {
            top: 'top'
          },
          xAxis: {
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [],
            name: '每日用户注册 ',
            type: 'line',
            areaStyle: {
              color: 'green'
            },
            smooth: true,

            itemStyle: {
              borderRadius: 8
            }
          }
          ]
        }

        //饼图
        var pie1option = {
          title: {
            text: '博客内容分布',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '50%',
              data: [
                { value: '', name: '' }

              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }

        //男女比例饼图
        var pie2Option = {
          title: {
            text: '用户男女比例',
            subtext: '',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '用户男女比例',
              type: 'pie',
              radius: ['20%', '40%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                  position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: '', name: ' ' }

              ]
            }
          ]
        }

        //柱状图
        var baroption = {
          title: {
            text: '每日用户留言数'
          },
          legend: {
            top: 'top'
          },
          tooltip: {},
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          xAxis: {
            type: 'category',
            data: [],
            boundaryGap: true
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '每日用户留言数',
              data: [],
              type: 'bar'
            }

          ]
        }

        //男女比例
        request.get('/user/findMember').then(res => {
          res.data.forEach(item => {
            pie2Option.series[0].data.push({ name: item.sex, value: item.count })
          })
          myChart4.setOption(pie2Option)
        })

        //每日留言数统计
        request.get('/message/findCommit').then(res=>{
          var xArr = new Array()
          var yArr = new Array()
          for (var i = 0; i < res.data.length; i++) {
            xArr.push(res.data[i].time)
            yArr.push(res.data[i].total)
          }

          //柱状图
          baroption.xAxis.data = xArr
          baroption.series[0].data = yArr
          myChart2.setOption(baroption)
        })


        request.get('/user/findNumbers').then(res=>{
          var xArr = new Array()
          var yArr = new Array()
          for (var i = 0; i < res.data.length; i++) {
            xArr.push(res.data[i].time)
            yArr.push(res.data[i].total)
          }
          //折线图
          option.xAxis.data = xArr
          option.series[0].data = yArr
          myChart.setOption(option)
        })

        request.get('/news/echarts').then(res => {
          var xArr = new Array()
          var yArr = new Array()
          for (var i = 0; i < res.data.length; i++) {
            xArr.push(res.data[i].time)
            yArr.push(res.data[i].total)
          }



          //饼图

          res.data.forEach(item => {
            pie1option.series[0].data.push({ name: item.category, value: item.count })
          })
          myChart3.setOption(pie1option)

        })
      }
    },
    mounted() {
      this.myEcharts()
    }
  }
</script>

<style>

</style>
